import { Navigate, RouteObject, useRoutes } from 'react-router-dom';
import React, { FC, lazy, Suspense } from 'react';
import { Skeleton } from 'antd-mobile';

const Loading = () => {
  return (
    <>
      <Skeleton.Title animated={true} />
      <Skeleton.Paragraph animated={true} />
    </>
  );
};

// 按需加载子页面
const Home = lazy(() => import('../page/home/index'));
const Layout = lazy(() => import('../page/layout/index'));
const HouseList = lazy(() => import('../page/house-list/index'));
const Information = lazy(() => import('../page/information/index'));
const PersonalCenter = lazy(() => import('../page/personal-center/indenx'));

const Map = lazy(() => import('../page/map/index'));
const CityList = lazy(() => import('../page/city-list'));

export const routes: RouteObject[] = [
  { path: '/', element: <Navigate to="/home" /> },
  {
    path: '/home',
    element: <Layout />,
    children: [
      {
        path: '/home',
        element: <Home></Home>,
      },
      {
        path: '/home/houseList',
        element: <HouseList></HouseList>,
      },
      {
        path: '/home/information',
        element: <Information></Information>,
      },
      {
        path: '/home/me',
        element: <PersonalCenter></PersonalCenter>,
      },
    ],
  },
  {
    path: '/map',
    element: <Map />,
  },
  {
    path: '/citylist',
    element: <CityList />,
  },
];

interface RoutesConfigProps {
  routes: RouteObject[];
}

const RoutesConfig: FC<RoutesConfigProps> = (props) => {
  const { routes } = props;
  const element = useRoutes(routes);
  return <Suspense fallback={<Loading />}>{element}</Suspense>;
};

export default RoutesConfig;
